<template>
  <div class="page">
    <div class="path"><span class="level-1">任务管理</span> > <span class="level-2">任务列表</span></div>
    <div class="mods">
      <div class="mod-1">
        <span class="name">任务数量：</span><span class="num">{{info.count}}</span>
      </div>
      <div class="mod-1">
        <span class="name">冻结资金：</span><span class="num">{{info.amount || '0.00'}}</span>
      </div>
      <div class="mod-1">
        <span class="name">总单量：</span><span class="num">{{info.tasknum || 0}}</span>
      </div>
      <div class="mod-1">
        <span class="name">已出单量：</span><span class="num">{{info.taskstock || 0}}</span>
      </div>
    </div>
    <div class="search">
      <div>
        <span>商家ID：</span>
        <Input v-model="params.bid" placeholder="商家ID"/>
      </div>
      <div>
        <span>任务类型：</span>
        <Select v-model="params.task_type" placeholder="任务类型" clearable>
          <Option v-for="item in taskStatus" :value="item.value">{{item.text}}</Option>
        </Select>
      </div>
      <div>
        <span>开始时间：</span>
        <DatePicker type="date" v-model="params.start_time" placeholder="开始时间"/>
      </div>
      <div>
        <span>结束时间：</span>
        <DatePicker type="date" v-model="params.end_time" placeholder="结束时间"/>
      </div>
      <div>
        <span>标题：</span>
        <Input v-model="params.goods_title" placeholder="标题"/>
      </div>
      <div>
        <span>任务ID：</span>
        <Input v-model="params.tid" placeholder="任务ID"/>
      </div>
      <div>
        <span>任务状态：</span>
        <Select v-model="params.status" placeholder="任务状态" clearable>
          <Option v-for="item in taskStatus" :value="item.value">{{item.text}}</Option>
        </Select>
      </div>
      <div class="btns">
        <Button type="primary" @click="query">查询</Button>
        <Button @click="reset">重置</Button>
      </div>
    </div>
    <DataList class="data-list"
              :columns="columns"
              :data="data"
              :total='total'
              :pageSize="pageSize"
              @pageChange="getData"></DataList>
    <Modal v-model="showDetail" :width="1000" title="任务详情">
      <TaskDetailModal :row="row"/>
    </Modal>
  </div>
</template>
<script>
import DataList from './DataList'
import {listTask} from '@/api/api-list'
import TaskDetailModal from './TaskDetailModal'
export default {
  name: 'Task',
  data () {
    return {
      columns: [
        {
          title: '任务ID',
          key: 'id',
          width: 80,
          fixed: 'left'
        },
        {
          title: '商家ID',
          key: 'bid',
          width: 80
        },
        {
          title: '当前任务单量',
          key: 'task_stock',
          width: 130
        },
        {
          title: '分站运营商ID',
          key: 'branch_id',
          width: 130
        },
        {
          title: '商品标题',
          key: 'goods_title',
          width: 200,
          tooltip: true
        },
        {
          title: '总单量',
          key: 'task_num',
          width: 80
        },
        {
          title: '已出单量',
          key: 'task_stock',
          width: 100
        },
        {
          title: '任务类型',
          key: 'task_type',
          width: 95
        },
        {
          title: '任务状态',
          key: 'status',
          width: 180
        },
        {
          title: '创建时间',
          key: 'create_time',
          width: 170
        },
        {
          title: '开始时间',
          key: 'start_time',
          width: 170
        },
        {
          title: '结束时间',
          key: 'end_time',
          width: 170
        },
        {
          title: '备注',
          key: 'remark',
          width: 160,
          tooltip: true
        },
        {
          title: '操作',
          fixed: 'right',
          key: 'action',
          width: 170,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', {
                style: {
                  color: '#2d8cf0',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.view(params.row, params.index)
                  }
                }
              }, '查看详情'),
              h('span', {
                style: {
                  color: '#2d8cf0',
                  cursor: 'pointer',
                  marginLeft: '15px'
                },
                on: {
                  click: () => {
                    this.viewOrder(params.row, params.index)
                  }
                }
              }, '查看订单')
            ])
          }
        }
      ],
      data: [],
      row: {},
      showDetail: false,
      params: {
        bid: this.bid,
        task_type: '',
        start_time: '', // 开始时间
        end_time: '', // 结束时间
        goods_title: '',
        tid: '',
        status: ''
      },
      total: 0,
      pageSize: 10,
      info: {
        count: 0,
        refunds: 0
      },
      taskType: [{value: '0', text: '手机搜索'}, {value: '1', text: '淘宝客下单'}, {value: '2', text: '淘口令下单'}, {value: '3', text: '直接下单'}],
      taskStatus: [{value: '0', text: '未支付'}, {value: '1', text: '支付(待审核)'}, {value: '2', text: '执行种(已经审核)'}, {value: '3', text: '下架'}, {value: '4', text: '活动结束'}, {value: '5', text: '审核未通过'}]
    }
  },
  props: {bid: String},
  components: {DataList, TaskDetailModal},
  mounted () {
    this.getData(1)
  },
  methods: {
    view (row) {
      this.row = row
      this.showDetail = true
    },
    viewOrder (row) {
      this.$router.push(`/order/${row.id}`)
      this.$emit('select-menu', 'order', 'order-manager')
    },
    getData (page) {
      listTask({...this.params, p: page}).then(({data}) => {
        this.data = data ? data.list : []
        this.total = data.total || 0
        this.pageSize = data.pageSize
        this.info = data.info || {}
      })
    },
    query () {
      this.getData(1)
    },
    reset () {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.getData(1)
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/page";
</style>
